<template>
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <svg
        t="1655197293488"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3069"
        width="17"
        height="17"
      >
        <path
          d="M501.973006 81.099336c-110.239789 0-214.772972 45.604889-294.697419 128.254759A455.249647 455.249647 0 0 0 116.305582 347.639372c-22.234981 52.782104-34.199671 107.961942-35.222704 164.164813-2.277847 111.94218 42.6317 218.305633 126.192709 299.708682a455.065821 455.065821 0 0 0 139.428197 92.680388 438.441536 438.441536 0 0 0 165.651407 36.02994h7.864566c108.873081 0 212.615012-44.917539 291.844116-126.424489a448.520008 448.520008 0 0 0 91.201786-135.77565 444.987348 444.987348 0 0 0 36.941079-161.767079v-2.501635l0.335683-2.277847v-1.486595l-0.223789-2.277847v-2.277846a438.033921 438.033921 0 0 0-130.069044-298.469853 437.722216 437.722216 0 0 0-300.739707-125.625245h-7.528883v-0.239773z m0-80.939487l9.015477-0.127879c277.24192 3.876336 502.293176 225.155158 510.613311 501.957493 0.231781 2.741409 0.231781 5.586719 0.231781 8.671803 0.335683 3.077091 0 5.8185-0.351668 8.66381-9.566956 267.331288-226.409972 502.293176-501.038362 502.293175h-9.35116C237.49502 1016.47911-4.987758 793.034335 0.598961 510.996948 5.618216 240.013113 224.267524 0.039962 501.973006 0.159849z m1.838262 768.033968c2.046066 2.733416 5.131149 4.443799 8.543923 4.555693a21.835359 21.835359 0 0 0 15.153675-6.841532c13.906854-11.397226 30.331327-31.690043 49.361338-61.326028l15.960912 9.119379c-46.052466 80.028348-95.190016 120.278299-146.8292 120.2783-19.717361 0-35.34259-5.594711-47.083491-16.768149a56.314765 56.314765 0 0 1-17.559401-42.296017c0-11.285332 2.509628-25.527868 7.872558-43.087269l63.49198-218.217716c6.154182-20.740394 9.231274-36.477517 9.231273-47.075499a24.145175 24.145175 0 0 0-8.887598-18.238759 33.784064 33.784064 0 0 0-23.489795-7.864566c-4.787474 0-10.366201 0.343675-16.528375 0.45557l5.594711-18.238759 154.589864-25.080291h27.014463L506.656578 722.021464c-4.795467 18.582434-7.305094 30.898791-7.305094 36.933087 0.471554 3.428759 1.942164 6.729638 4.459784 9.239266z m115.93041-465.927553a66.513124 66.513124 0 0 1-47.547054 19.605467 64.714824 64.714824 0 0 1-46.843718-19.605467 65.162401 65.162401 0 0 1-19.493572-47.315272 65.697895 65.697895 0 0 1 19.261791-47.658948 63.659822 63.659822 0 0 1 47.083492-19.725353c18.926109 0 35.006908 6.617744 47.882736 19.725353 12.883821 13.115602 19.493572 29.188408 19.493572 47.658948a63.220237 63.220237 0 0 1-19.837247 47.315272z"
          fill="#8a8a8a"
          p-id="3070"
        ></path>
      </svg>
    </div>
    <div class="main">
      <span style="display: flex; align-items: center">
        <span class="main-title">12454</span>
        <span class="main-content">17.1</span>
        <svg
          t="1655200425570"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2222"
          width="20"
          height="20"
        >
          <path
            d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z"
            fill="#d81e06"
            p-id="2223"
          ></path>
        </svg>
        <svg
          t="1655200595441"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3248"
          width="20"
          height="20"
        >
          <path
            d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z"
            fill="#1afa29"
            p-id="3249"
          ></path>
        </svg>
      </span>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.newLineChart()
  },
  methods: {
    newLineChart() {
      // 初始化 echarts 实例
      const lineCharts = echarts.init(this.$refs.charts);
      lineCharts.setOption({
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: { show: false },
        grid: {
          left: -10,
          top: 0,
          right: -15,
          bottom: 0,
        },
        series: [
          {
            type: "line",
            data: [30, 50, 45, 68, 88, 37, 81],
            // 拐点样式的设置
            itemStyle: {
              opacity: 0,
            },
            // 线条样式
            lineStyle: {
              color: "blue",
            },
            // 填充颜色
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            smooth: true,
          },
        ],
        tooltip: {},
      });
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main {
  margin: 20px 0;
}
.main-title {
  margin-right: 50px;
  font-size: 24px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>